<script setup lang="ts">
import { ref, computed } from 'vue';

interface Problem {
  expression: string;
  answer: number;
  displayExpression: string;
}

interface Detail {
  problem: Problem;
  userAnswer: string;
  isCorrect: boolean;
  timeSpent: number;
  index?: number;
}

interface Props {
  details: Detail[];
  totalProblems: number;
  practiceDate?: string;
  accuracy?: number;
  totalTime?: number;
  showHeader?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showHeader: true
});

// 耗时分析相关的状态
const sortByTime = ref(false);
const highlightLongTime = ref(true);
const longTimeThreshold = ref(6); // 默认6秒

// 计算平均耗时
const averageTime = computed(() => {
  if (props.details.length === 0) return 0;
  const total = props.details.reduce((sum, detail) => sum + detail.timeSpent, 0);
  return total / props.details.length;
});

// 计算最长耗时
const maxTime = computed(() => {
  if (props.details.length === 0) return 0;
  return Math.max(...props.details.map(detail => detail.timeSpent));
});

// 按耗时排序的答题记录
const sortedDetails = computed(() => {
  const details = props.details.map((detail, index) => ({
    ...detail,
    index: index + 1
  }));
  
  if (sortByTime.value) {
    return [...details].sort((a, b) => b.timeSpent - a.timeSpent);
  }
  return details;
});

// 生成耗时分布数据
const timeDistribution = computed(() => {
  const distribution = new Array(10).fill(0); // 0-1s, 1-2s, ..., 9-10s, >10s
  const maxTime = 10; // 最大显示10秒
  
  props.details.forEach(detail => {
    const time = Math.min(detail.timeSpent, maxTime);
    const index = Math.floor(time);
    distribution[index]++;
  });
  
  return distribution;
});

// 格式化时间显示
const formatTime = (seconds: number) => {
  return `${seconds.toFixed(1)}秒`;
};
</script>

<template>
  <div class="practice-detail">
    <!-- 头部信息 -->
    <div v-if="showHeader" class="row q-col-gutter-md q-mb-md">
      <div class="col-12 col-md-4">
        <q-card class="bg-primary text-white">
          <q-card-section>
            <div class="text-subtitle2">练习时间</div>
            <div>{{ practiceDate ? new Date(practiceDate).toLocaleString() : '当前练习' }}</div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-md-4">
        <q-card class="bg-secondary text-white">
          <q-card-section>
            <div class="text-subtitle2">正确率</div>
            <div>{{ accuracy ? Math.round(accuracy) : 0 }}%</div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-md-4">
        <q-card class="bg-accent text-white">
          <q-card-section>
            <div class="text-subtitle2">总耗时</div>
            <div>{{ totalTime ? formatTime(totalTime) : '0秒' }}</div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- 耗时统计 -->
    <div class="row q-col-gutter-md q-mb-lg">
      <div class="col-6">
        <q-card class="bg-primary text-white">
          <q-card-section>
            <div class="text-subtitle2">平均耗时</div>
            <div class="text-h6">{{ formatTime(averageTime) }}</div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-6">
        <q-card class="bg-secondary text-white">
          <q-card-section>
            <div class="text-subtitle2">最长耗时</div>
            <div class="text-h6">{{ formatTime(maxTime) }}</div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- 耗时分布图 -->
    <div class="q-mb-lg">
      <div class="text-subtitle1 q-mb-sm">耗时分布</div>
      <div class="time-distribution-chart">
        <div 
          v-for="(count, index) in timeDistribution" 
          :key="index"
          class="chart-bar"
          :style="{ height: `${(count / details.length) * 100}%` }"
        >
          <q-tooltip>
            {{ index === 9 ? '>10秒' : `${index}-${index + 1}秒` }}: {{ count }}题
          </q-tooltip>
        </div>
      </div>
      <div class="chart-labels">
        <div v-for="i in 10" :key="i" class="chart-label">
          {{ i - 1 }}
        </div>
      </div>
    </div>

    <!-- 答题详情 -->
    <div class="text-subtitle2 q-mb-sm">答题详情</div>
    <div class="row items-center justify-between q-mb-md">
      <div class="text-subtitle2">答题详情：</div>
      <div class="row items-center q-gutter-sm">
        <q-toggle
          v-model="sortByTime"
          label="按耗时排序"
          color="primary"
        />
        <q-toggle
          v-model="highlightLongTime"
          label="高亮耗时"
          color="primary"
        />
        <q-input
          v-if="highlightLongTime"
          v-model.number="longTimeThreshold"
          type="number"
          dense
          outlined
          label="耗时阈值(秒)"
          style="width: 120px"
          :min="1"
          :max="60"
        />
      </div>
    </div>
    <q-list bordered separator>
      <q-item 
        v-for="detail in sortedDetails" 
        :key="detail.index"
        :class="{ 'long-time': highlightLongTime && detail.timeSpent > longTimeThreshold }"
      >
        <q-item-section>
          <q-item-label>{{ detail.problem.displayExpression }}</q-item-label>
          <q-item-label caption>
            你的答案: {{ detail.userAnswer }} | 
            正确答案: {{ detail.problem.answer }} |
            耗时: {{ formatTime(detail.timeSpent) }}
          </q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-icon
            :name="detail.isCorrect ? 'check_circle' : 'cancel'"
            :color="detail.isCorrect ? 'positive' : 'negative'"
            size="24px"
          />
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<style scoped>
.time-distribution-chart {
  display: flex;
  align-items: flex-end;
  height: 200px;
  gap: 4px;
  margin-bottom: 4px;
  padding-top: 20px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

.chart-bar {
  flex: 1;
  background-color: #1976D2;
  margin: 0 3px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  min-height: 4px;
  transition: height 0.3s;
}

.chart-labels {
  display: flex;
  justify-content: space-around;
}

.chart-label {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #666;
}

.long-time {
  background-color: rgba(255, 0, 0, 0.1);
}
</style> 